<template>
  <div>
    <NSpace vertical :size="16">
    <NCard :bordered="false" class="card-wrapper">
      <div class="flex-x-btn">
        <NForm ref="formRef" inline :label-width="80" :model="formValue" label-placement="left">
          <NFormItem label="关键字" path="keywork">
            <NInput v-model:value="formValue.keywork" placeholder="输入关键字" />
          </NFormItem>
          <NFormItem>
            <NButton attr-type="button" type="primary" @click="handleValidateClick">
              查询
            </NButton>
          </NFormItem>
          <NFormItem>
            <NButton attr-type="button" @click="handleClearClick">
              重置
            </NButton>
          </NFormItem>
        </NForm>
        <div style="flex: 1">
          <NButton attr-type="button" @click="handleControlTypeClick('add')">
            新增
          </NButton>
        </div>
      </div>
    </NCard>
  </NSpace>

  <n-modal v-model:show="showModal" preset="card" title="确认" content="你确认?" positive-text="确认" negative-text="算了" size="medium"
    @positive-click="submitCallback" @negative-click="cancelCallback" style="width: 700px;"/>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage, NButton, type FormInst } from 'naive-ui'

const formRef = ref<FormInst | null>(null)
const message = useMessage()

const showModal = ref(false)


const formValue = ref({
  keywork: '' // 如果是拼写错误，改为 keyword
})

const handleValidateClick = () => {
  console.log("formValue", formValue.value)
}

const handleClearClick = () => {
  formValue.value.keywork = ''
}

const handleControlTypeClick = (type: string) => {
  if (type === 'add') handleAddClick()
}

const cancelCallback = () => {
  message.success('Cancel')
}
const submitCallback = () => {
  message.success('Submit')
}

const handleAddClick = () => {
  showModal.value = true
}
</script>